<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .box{
        width: 300px;
        padding:15px 10px;
        background-color: #eee;
        border-radius: 6px;
        font-size: 13px;
        line-height: 24px;
    }
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">公众号管理</a>
            <a><cite>被关注回复</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    开关 
                </label>
                <div class="layui-input-block" style="display: flex;align-items: center;">
                    <input type="checkbox" lay-skin="switch" lay-filter="follow_reply_switch" lay-text="ON|OFF" {eq name="sign_reply_switch" value="1"}checked{/eq}>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="radio" name="lei" value="0" title="系统默认" lay-filter="*" {eq name="is_custom_reply" value="0"}checked{/eq}>
                    <input type="radio" name="lei" value="1" title="自定义" lay-filter="*" {eq name="is_custom_reply" value="1"}checked{/eq}>
                </div>
            </div>
            <div id="message" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>小程序标题
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="小程序标题" required="required"
                            lay-verify="required" autocomplete="off" class="layui-input" value="{$data.title|default=''}" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>链接地址
                    </label>
                    <div id="pMenu" style="width:100%;flex:1"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        上行文字
                    </label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="up_text" placeholder="上行文字" required="required"
                            lay-verify="required" autocomplete="off" class="layui-input" value="{$data.up_text|default=''}" /> -->
                        <textarea name="up_text" placeholder="上行文字" class="layui-textarea" autocomplete="off">{$data.up_text|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        下行文字
                    </label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="down_text" placeholder="下行文字" required="required"
                            lay-verify="required" autocomplete="off" class="layui-input" value="{$data.down_text|default=''}" /> -->
                        <textarea name="down_text" placeholder="下行文字" class="layui-textarea" autocomplete="off">{$data.down_text|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        效果
                    </label>
                    <div class="layui-input-block">
                        <div class="box">
                            <div id="up"></div>
                            <div id="title" class="layui-font-blue"></div>
                            <div id="down"></div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="id" class="layui-input" value="{$data.id|default=''}" />
                <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="margin-left: 110px;">保存</button>
            </div>
        </form>
    </div>
    <script>

        let selectParams = {
            url: '/cps/officialAccount/linkSelect',
            selected: ['{$data.link_url|default=""}'],
            tips: '选择地址',
            name: 'link_url',
            field_id: 'value',
            field_Name: 'name',
            elem: '#pMenu'
        }
        selectN(selectParams)

        // 默认 是否显示自定义的内容
        if('{$is_custom_reply}' === '1'){
            $('#message').show()
        }else{
            $('#message').hide()
        }
        $('#up').html(formatValue(`{$data.up_text|default=''}`))
        $('#title').html(formatValue(`{$data.title|default=''}`))
        $('#down').html(formatValue(`{$data.down_text|default=''}`))
        layui.use(["form", "layer"], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            
            form.on('radio(*)', function(data){
                if(data.value == 1){
                    $('#message').show()
                }else{
                    $('#message').hide()
                }
            });
            form.on('switch(follow_reply_switch)', function(data){
                let value = data.elem.checked ? 1 : 2;
                Ajax('/cps/officialAccount/switch',{type:2,value}).then();
            });
            form.on('submit(submitData)', function(data){
                var formData = data.field
                Ajax('/cps/officialAccount/signReply',formData).then(data =>{
                    if (data.code === 200) {
                        layer.msg(data.message, {
                            icon: 6
                        });
                    }
                });
                return false
            });
        })
        $('textarea[name=up_text]').on('input',function(e){
            setDom('#up',formatValue($(this).val()))
            $(this).html()
        })
        $('textarea[name=down_text]').on('input',function(e){
            setDom('#down',formatValue($(this).val()))
            $(this).html()
        })
        $('input[name=title]').on('input',function(e){
            setDom('#title',$(this).val())
        })

        function formatValue(value){
            let text = value;
            text = text.replace(/\r\n/g,"<br>")//兼容i7、i8
            text = text.replace(/\n/g,"<br>"); //i9及以上
            
            text = text.replace(/\s/g," ");//替换所有的空格（中文空格、英文空格都会被替换）
            return text
        }

        function setDom(id,value){
            $(id).html(value)
        }
    </script>
</body>

</html>